<template>
  <div class="main">
    <el-row>
      <el-col :span="12" :xs="0">
        <img src="../../assets/img/anya3.jpg" width="50%" >
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form ref="form" label-width="80px" class="form">
          <p><span style="color:blue;">Eleming</span>后台管理系统</p>

          <el-form-item label="用户名称" >
            <el-input v-model="loginData.name" placeholder="请输入用户名称" prefix-icon="el-icon-user"></el-input>
          </el-form-item>

          <el-form-item label="用户密码" >
            <el-input placeholder="请输入密码" v-model="loginData.password" show-password prefix-icon="el-icon-lock"></el-input>
          </el-form-item>

          <el-button type="primary" @click="login" class="button">登录</el-button>   
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import { Notification } from 'element-ui';

export default {
  name: "LoginView",
  data(){
    return{
      loginData:{
        name: "",
        password: ""
      }
    }
  },
  methods:{
    ...mapActions("loginStore",{userlogin:"login"}),
    async login(){
      try{
        const userName = await this.userlogin(this.loginData);
        this.$router.replace("/home");
        Notification({
          type: "success",
          title:"登陆成功",
          message: `欢迎您，${userName}！！！`
        });
      }catch(error){
        Notification({
          type: "error",
          message:error.message,
          title:"登陆失败"
        });
      }
    }
  }
}
</script>

<style scoped lang="scss">
.main{
  height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #87CEEB 0%, #4682B4 50%, #1E90FF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    margin-left: 50px;
  }
  .form{
    width: 100%;
    padding: 10px;
    max-width: 800px;
    margin: 0 auto;
    // outline:1px solid red;
    p{
      text-align: center;
      font-size: 2rem;
      margin-bottom: 10px;
      font-weight: bold;
    }
    .button{
      width: 100%;
      padding:15px;
    }
  }
}
</style>